<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%">

    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">

/** 风险辨识 表单 */
defineOptions({ name: 'AssessmentForm' });

const { t } = useI18n(); // 国际化
const message = useMessage(); // 消息弹窗

const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(''); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(''); // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  riskType: undefined,
  riskTypeInfoId: undefined,
  identifyObjects: []
});
const formRules = reactive({
  riskType: [{ required: true, message: '风险类型不能为空', trigger: 'change' }],
  riskTypeInfoId: [{ required: true, message: '风险点不能为空', trigger: 'blur' }],
  riskTarget: [{ required: true, message: '风险对象不能为空', trigger: 'blur' }],
  identifyContent: [{ required: true, message: '辨识内容不能为空', trigger: 'blur' }]
});
const formRef = ref(); // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true;
  dialogTitle.value = t('action.' + type);
  formType.value = type;
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      // 遍历 formData.value.identifyObjects，给每个 identifyObjects 增加一个 contents 数组
    } finally {
      formLoading.value = false;
    }
  }
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate();
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value;
    if (formType.value === 'create') {
      message.success(t('common.createSuccess'));
    } else {
      message.success(t('common.updateSuccess'));
    }
    dialogVisible.value = false;
    // 发送操作成功的事件
    emit('success');
  } finally {
    formLoading.value = false;
  }
};


/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    riskType: undefined,
    riskTypeInfoId: undefined,
    identifyObjects: [],
  };
  formRef.value?.resetFields();
};
</script>

<style scoped>
:deep(.el-card__header) {
  padding: 10px;
}
</style>
